<template>
  <div>
    <div style="margin-top: 20px;padding: 20px;background-color: #FFFFFF">
      <a-form-model ref="ruleForm" layout="inline" :model="form">
        <div class="mode_item">
          <div>
            <a-form-model-item label="模板名称" prop="templateName">
              <a-input v-model="form.templateName" placeholder="请输入"/>
            </a-form-model-item>
            <a-form-model-item label="是否应用" prop="usageStatus">
              <a-select v-model="form.usageStatus" style="width: 200px" placeholder="请选择">
                <a-select-option value="1">
                  是
                </a-select-option>
                <a-select-option value="0">
                  否
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
          <div>
            <a-form-model-item label="创建时间" class="zdy-form-item-label">
              <a-radio-group buttonStyle="solid" v-model="form.templateTimeType">
                <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
              <a-date-picker
                v-if="form.timeType === '0'"
                v-model="form.initiateTime"
                show-time
                type="date"
                placeholder="请选择时间"
                style="margin-left: 10px"
                @change="onChange1"
              />
            </a-form-model-item>
          </div>
          <div>
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询</a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置</a-button>
            </a-form-model-item>
          </div>

        </div>
      </a-form-model>

    </div>
    <div style="margin-top: 20px;padding: 20px;background-color: #FFFFFF">
      <div style="padding-bottom: 15px">
        <!--          <a-button @click="showModal">导入</a-button>-->
        <a-button type="primary" @click="manageBtn">新增模板</a-button>
        <!--          <a-button type="primary" style="margin-left: 10px;" @click="upload">事件上报</a-button>-->
      </div>
      <custom-table
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="false"
        :showPagination="true"
        rowKey="warningEvtid"
        :loading="loading"
        @change="onTableChange"
      >
        <template slot="usageStatus" slot-scope="text, record">
          <span v-if="text === '0'" style="color: #D9011C">否</span>
          <span v-if="text === '1'" style="color: #71B604">是</span>
        </template>
        <template slot="caozuo" slot-scope="text, record">
          <a style="padding: 0 5px" @click="onView1(record)">查看</a>
          <a style="padding: 0 5px" @click="onView2(record)">编辑</a>
          <a style="padding: 0 5px" @click="onView3(record)">删除</a>
        </template>
      </custom-table>
    </div>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import {sysCaptchaEngineList, sysTemplateDelete, sysTemplateList, sysTemplateShow} from "@api/smuggle/intercalate";
export default {
  name: "index",
  components: { CustomTable },
  data(){
    return {
      visible:false,
      rangePickerTime: [],
      form:{
        createdBy: "",
        finishTime: "",
        id: "",
        initiateTime: "",
        sorter: "",
        templateName: "",
        templateTimeType: 0,
        usageStatus: ""
      },
      form1:{},
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      rules: {
        select: [{ required: true, message: '请选择要训练的模型', trigger: 'blur' }],
        date: [{ required: true, message: '请输入时间', trigger: 'blur' }],
      },
      options: [
        { value: '2', text: '今天' },
        { value: '1', text: '昨天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' }
      ],
      options1:[
        { value: '0', text: '找出汉字验证码' },
        { value: '1', text: '汉字输入验证码' },
        { value: '2', text: '点选验证码' },
        { value: '3', text: '滑动验证码' },
        { value: '5', text: '滑块拼接验证码' }
      ],
      columns: [
        {
          title: '模型名称',
          dataIndex: 'templateName',
          scopedSlots: { customRender: 'templateName' }
        },
        {
          title: '创建时间',
          dataIndex: 'createdTime',
          scopedSlots: { customRender: 'createdTime' }
        },
        {
          title: '创建人',
          dataIndex: 'createdBy',
          scopedSlots: { customRender: 'createdBy' }
        },
        {
          title: '是否应用',
          dataIndex: 'usageStatus',
          scopedSlots: { customRender: 'usageStatus' }
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          scopedSlots: { customRender: 'caozuo' }
        },
      ],
      pageData: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pass:undefined
    }
  },
  mounted() {
    this.refreshTable(this.pageFilter)
  },
  watch:{
    form:{
      deep:true,
      handler(a,b){
        this.pageFilter.pageNo = 1
      }
    }
  },
  methods:{
    onView1(val){
      this.$router.push({
        path:'/isystem/templetSet',
        query:{
          id:val.id,
          item:true
        }
      })
    },
    onView2(val){
      this.$router.push({
        path:'/isystem/templetSet',
        query:{
          id:val.id,
          item:false
        }
      })
    },
    onView3(val){
      sysTemplateDelete({id:val.id}).then(ser => {
        if(ser.success){
          this.refreshTable(this.pageFilter)
          this.$message.success('删除成功', 2,);
        } else {
          this.$message.warn('删除失败！')
        }
      })
    },
    submitForm() {
      this.$refs.ruleForm1.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.pass = valid
      });
    },
    onQuery(){
      this.refreshTable(Object.assign({},this.form,this.pageData))
    },
    onResetForm(){
      delete this.form.timeType
      this.$refs.ruleForm.resetFields();
      this.refreshTable(this.pageFilter)
    },
    manageBtn(){
      this.$router.push({
        path:'/isystem/templetSet',
        query:{
          item:'3'
        }
      })
    },
    handleOk(e){
      if(!this.pass){
        this.$message.warn('心里没点逼数！')
      }

    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    onChange1(date, dateString) {
      console.log(date, dateString);
      this.form.beginTime = dateString
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable(val){
      let formData = Object.assign({}, this.form, this.pageFilter)
      sysTemplateList(formData).then(ser => {
        console.log(ser)
        if(ser.success){
          this.pageData = ser.result
        }
      })
    },
  }
}
</script>

<style scoped>
/deep/.ant-select-selection--single{
  width: 200px!important;
}
</style>